@let organization = this.organization();
@if (organization) {
  <app-organization-free-trial-warning
    [organization]="organization"
    (clicked)="billingConstraint.navigateToPaymentMethod(organization)"
  >
  </app-organization-free-trial-warning>
  <app-header>
    <bit-search
      class="tw-grow"
      [formControl]="searchControl"
      [placeholder]="'searchMembers' | i18n"
    ></bit-search>

    <button
      type="button"
      bitButton
      buttonType="primary"
      (click)="invite(organization)"
      [disabled]="!firstLoaded"
      *ngIf="showUserManagementControls()"
    >
      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
      {{ "inviteMember" | i18n }}
    </button>
  </app-header>

  <div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
    <bit-toggle-group
      [selected]="status"
      (selectedChange)="statusToggle.next($event)"
      [attr.aria-label]="'memberStatusFilter' | i18n"
      *ngIf="showUserManagementControls()"
    >
      <bit-toggle [value]="null">
        {{ "all" | i18n }}
        <span bitBadge variant="info" *ngIf="dataSource.activeUserCount as allCount">{{
          allCount
        }}</span>
      </bit-toggle>

      <bit-toggle [value]="userStatusType.Invited">
        {{ "invited" | i18n }}
        <span bitBadge variant="info" *ngIf="dataSource.invitedUserCount as invitedCount">{{
          invitedCount
        }}</span>
      </bit-toggle>

      <bit-toggle [value]="userStatusType.Accepted">
        {{ "needsConfirmation" | i18n }}
        <span bitBadge variant="info" *ngIf="dataSource.acceptedUserCount as acceptedUserCount">{{
          acceptedUserCount
        }}</span>
      </bit-toggle>

      <bit-toggle [value]="userStatusType.Revoked">
        {{ "revoked" | i18n }}
        <span bitBadge variant="info" *ngIf="dataSource.revokedUserCount as revokedCount">{{
          revokedCount
        }}</span>
      </bit-toggle>
    </bit-toggle-group>
  </div>
  <ng-container *ngIf="!firstLoaded">
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </ng-container>
  <ng-container *ngIf="firstLoaded">
    <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
    <ng-container *ngIf="dataSource.filteredData.length">
      <bit-callout
        type="info"
        title="{{ 'confirmUsers' | i18n }}"
        icon="bwi-check-circle"
        *ngIf="showConfirmUsers"
      >
        {{ "usersNeedConfirmed" | i18n }}
      </bit-callout>
      <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
    from overflowing the <main> element. -->
      <cdk-virtual-scroll-viewport bitScrollLayout [itemSize]="rowHeight" class="tw-pb-8">
        <bit-table [dataSource]="dataSource">
          <ng-container header>
            <tr>
              <th bitCell class="tw-w-20" *ngIf="showUserManagementControls()">
                <input
                  type="checkbox"
                  bitCheckbox
                  class="tw-mr-1"
                  (change)="dataSource.checkAllFilteredUsers($any($event.target).checked)"
                  id="selectAll"
                />
                <label class="tw-mb-0 !tw-font-medium !tw-text-muted" for="selectAll">{{
                  "all" | i18n
                }}</label>
              </th>
              <th bitCell bitSortable="email" default>{{ "name" | i18n }}</th>
              <th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
              <th bitCell bitSortable="type">{{ "role" | i18n }}</th>
              <th bitCell>{{ "policies" | i18n }}</th>
              <th bitCell class="tw-w-10">
                <button
                  [bitMenuTriggerFor]="headerMenu"
                  type="button"
                  bitIconButton="bwi-ellipsis-v"
                  size="small"
                  label="{{ 'options' | i18n }}"
                  *ngIf="showUserManagementControls()"
                ></button>

                <bit-menu #headerMenu>
                  <ng-container *ngIf="canUseSecretsManager()">
                    <button type="button" bitMenuItem (click)="bulkEnableSM(organization)">
                      {{ "activateSecretsManager" | i18n }}
                    </button>
                    <bit-menu-divider></bit-menu-divider>
                  </ng-container>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkReinvite(organization)"
                    *ngIf="showBulkReinviteUsers"
                  >
                    <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                    {{ "reinviteSelected" | i18n }}
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkConfirm(organization)"
                    *ngIf="showBulkConfirmUsers"
                  >
                    <span class="tw-text-success">
                      <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                      {{ "confirmSelected" | i18n }}
                    </span>
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkRestore(organization)"
                    *ngIf="showBulkRestoreUsers"
                  >
                    <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
                    {{ "restoreAccess" | i18n }}
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkRevoke(organization)"
                    *ngIf="showBulkRevokeUsers"
                  >
                    <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
                    {{ "revokeAccess" | i18n }}
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkRemove(organization)"
                    *ngIf="showBulkRemoveUsers"
                  >
                    <span class="tw-text-danger">
                      <i aria-hidden="true" class="bwi bwi-fw bwi-close"></i>
                      {{ "remove" | i18n }}
                    </span>
                  </button>
                  <button
                    type="button"
                    bitMenuItem
                    (click)="bulkDelete(organization)"
                    *ngIf="showBulkDeleteUsers"
                  >
                    <span class="tw-text-danger">
                      <i aria-hidden="true" class="bwi bwi-fw bwi-trash"></i>
                      {{ "delete" | i18n }}
                    </span>
                  </button>
                </bit-menu>
              </th>
            </tr>
          </ng-container>
          <ng-template body let-rows$>
            <tr
              bitRow
              *cdkVirtualFor="let u of rows$"
              alignContent="middle"
              [ngClass]="rowHeightClass"
            >
              <td bitCell (click)="dataSource.checkUser(u)" *ngIf="showUserManagementControls()">
                <input type="checkbox" bitCheckbox [(ngModel)]="$any(u).checked" />
              </td>
              <ng-container *ngIf="showUserManagementControls(); else readOnlyUserInfo">
                <td bitCell (click)="edit(u, organization)" class="tw-cursor-pointer">
                  <div class="tw-flex tw-items-center">
                    <bit-avatar
                      size="small"
                      [text]="u | userName"
                      [id]="u.userId"
                      [color]="u.avatarColor"
                      class="tw-mr-3"
                    ></bit-avatar>
                    <div class="tw-flex tw-flex-col">
                      <div class="tw-flex tw-flex-row tw-gap-2">
                        <button type="button" bitLink>
                          {{ u.name ?? u.email }}
                        </button>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="secondary"
                          *ngIf="u.status === userStatusType.Invited"
                        >
                          {{ "invited" | i18n }}
                        </span>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="warning"
                          *ngIf="u.status === userStatusType.Accepted"
                        >
                          {{ "needsConfirmation" | i18n }}
                        </span>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="secondary"
                          *ngIf="u.status === userStatusType.Revoked"
                        >
                          {{ "revoked" | i18n }}
                        </span>
                      </div>
                      <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
                        {{ u.email }}
                      </div>
                    </div>
                  </div>
                </td>
              </ng-container>
              <ng-template #readOnlyUserInfo>
                <td bitCell>
                  <div class="tw-flex tw-items-center">
                    <bit-avatar
                      size="small"
                      [text]="u | userName"
                      [id]="u.userId"
                      [color]="u.avatarColor"
                      class="tw-mr-3"
                    ></bit-avatar>
                    <div class="tw-flex tw-flex-col">
                      <div class="tw-flex tw-flex-row tw-gap-2">
                        <span>{{ u.name ?? u.email }}</span>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="secondary"
                          *ngIf="u.status === userStatusType.Invited"
                        >
                          {{ "invited" | i18n }}
                        </span>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="warning"
                          *ngIf="u.status === userStatusType.Accepted"
                        >
                          {{ "needsConfirmation" | i18n }}
                        </span>
                        <span
                          bitBadge
                          class="tw-text-xs"
                          variant="secondary"
                          *ngIf="u.status === userStatusType.Revoked"
                        >
                          {{ "revoked" | i18n }}
                        </span>
                      </div>
                      <div class="tw-text-sm tw-text-muted" *ngIf="u.name">
                        {{ u.email }}
                      </div>
                    </div>
                  </div>
                </td>
              </ng-template>

              <ng-container *ngIf="showUserManagementControls(); else readOnlyGroupsCell">
                <td
                  bitCell
                  (click)="
                    edit(
                      u,
                      organization,
                      organization.useGroups ? memberTab.Groups : memberTab.Collections
                    )
                  "
                  class="tw-cursor-pointer"
                >
                  <bit-badge-list
                    [items]="organization.useGroups ? u.groupNames : u.collectionNames"
                    [maxItems]="3"
                    variant="secondary"
                  ></bit-badge-list>
                </td>
              </ng-container>
              <ng-template #readOnlyGroupsCell>
                <td bitCell>
                  <bit-badge-list
                    [items]="organization.useGroups ? u.groupNames : u.collectionNames"
                    [maxItems]="3"
                    variant="secondary"
                  ></bit-badge-list>
                </td>
              </ng-template>

              <ng-container *ngIf="showUserManagementControls(); else readOnlyRoleCell">
                <td
                  bitCell
                  (click)="edit(u, organization, memberTab.Role)"
                  class="tw-cursor-pointer tw-text-sm tw-text-muted"
                >
                  {{ u.type | userType }}
                </td>
              </ng-container>
              <ng-template #readOnlyRoleCell>
                <td bitCell class="tw-text-sm tw-text-muted">
                  {{ u.type | userType }}
                </td>
              </ng-template>

              <td bitCell class="tw-text-muted">
                <ng-container *ngIf="u.twoFactorEnabled">
                  <i
                    class="bwi bwi-lock"
                    title="{{ 'userUsingTwoStep' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
                </ng-container>
                @let resetPasswordPolicyEnabled = resetPasswordPolicyEnabled$ | async;
                <ng-container
                  *ngIf="showEnrolledStatus($any(u), organization, resetPasswordPolicyEnabled)"
                >
                  <i
                    class="bwi bwi-key"
                    title="{{ 'enrolledAccountRecovery' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="tw-sr-only">{{ "enrolledAccountRecovery" | i18n }}</span>
                </ng-container>
              </td>
              <td bitCell>
                <button
                  [bitMenuTriggerFor]="rowMenu"
                  type="button"
                  bitIconButton="bwi-ellipsis-v"
                  size="small"
                  label="{{ 'options' | i18n }}"
                ></button>

                <bit-menu #rowMenu>
                  <ng-container *ngIf="showUserManagementControls()">
                    <button
                      type="button"
                      bitMenuItem
                      (click)="reinvite(u, organization)"
                      *ngIf="u.status === userStatusType.Invited"
                    >
                      <i aria-hidden="true" class="bwi bwi-envelope"></i>
                      {{ "resendInvitation" | i18n }}
                    </button>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="confirm(u, organization)"
                      *ngIf="u.status === userStatusType.Accepted"
                    >
                      <span class="tw-text-success">
                        <i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
                      </span>
                    </button>
                    <bit-menu-divider
                      *ngIf="
                        u.status === userStatusType.Accepted || u.status === userStatusType.Invited
                      "
                    ></bit-menu-divider>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="edit(u, organization, memberTab.Role)"
                    >
                      <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
                    </button>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="edit(u, organization, memberTab.Groups)"
                      *ngIf="organization.useGroups"
                    >
                      <i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
                    </button>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="edit(u, organization, memberTab.Collections)"
                    >
                      <i aria-hidden="true" class="bwi bwi-collection-shared"></i>
                      {{ "collections" | i18n }}
                    </button>
                    <bit-menu-divider></bit-menu-divider>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="openEventsDialog(u, organization)"
                      *ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
                    >
                      <i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
                    </button>
                  </ng-container>

                  <!-- Account recovery is available to all users with appropriate permissions -->
                  <button
                    type="button"
                    bitMenuItem
                    (click)="resetPassword(u, organization)"
                    *ngIf="allowResetPassword(u, organization, resetPasswordPolicyEnabled)"
                  >
                    <i aria-hidden="true" class="bwi bwi-key"></i> {{ "recoverAccount" | i18n }}
                  </button>

                  <ng-container *ngIf="showUserManagementControls()">
                    <button
                      type="button"
                      bitMenuItem
                      (click)="restore(u, organization)"
                      *ngIf="u.status === userStatusType.Revoked"
                    >
                      <i aria-hidden="true" class="bwi bwi-plus-circle"></i>
                      {{ "restoreAccess" | i18n }}
                    </button>
                    <button
                      type="button"
                      bitMenuItem
                      (click)="revoke(u, organization)"
                      *ngIf="u.status !== userStatusType.Revoked"
                    >
                      <i aria-hidden="true" class="bwi bwi-minus-circle"></i>
                      {{ "revokeAccess" | i18n }}
                    </button>
                    <button
                      *ngIf="!u.managedByOrganization"
                      type="button"
                      bitMenuItem
                      (click)="remove(u, organization)"
                    >
                      <span class="tw-text-danger">
                        <i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
                      </span>
                    </button>
                    <button
                      *ngIf="u.managedByOrganization"
                      type="button"
                      bitMenuItem
                      (click)="deleteUser(u, organization)"
                    >
                      <span class="tw-text-danger">
                        <i class="bwi bwi-trash" aria-hidden="true"></i>
                        {{ "delete" | i18n }}
                      </span>
                    </button>
                  </ng-container>
                </bit-menu>
              </td>
            </tr>
          </ng-template>
        </bit-table>
      </cdk-virtual-scroll-viewport>
    </ng-container>
  </ng-container>
}
